<template>
  <div class="need">
    <el-container>
      <el-main>
        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm-1">
          <el-form-item label="所属合同" prop="bgContract">
            <el-select
              v-model="ruleForm.bgContract"
              placeholder="请选择"
              style="width: 450px">
              <el-option
                v-for="(item, index) in contractList"
                :key="index"
                :value="item"
                :label="item">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="所属项目" prop="bgProject">
            <el-select v-model="ruleForm.bgProject"
                       placeholder="请选择"
                       style="width: 300px;">
              <el-option
                v-for="(item, index) in projectList"
                :key="index"
                :value="item"
                :label="item">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="期数" prop="stageNum">
            <el-select v-model="ruleForm.stageNum" placeholder="请选择" style="width: 100px">
              <el-option label="第一期" value="第一期"></el-option>
              <el-option label="第二期" value="第二期"></el-option>
              <el-option label="第三期" value="第三期"></el-option>
              <el-option label="第四期" value="第四期"></el-option>
              <el-option label="第五期" value="第五期"></el-option>
            </el-select>
          </el-form-item>

        </el-form>

        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm-2">
          <el-form-item label="需求来源" prop="demandSource">
            <el-select v-model="ruleForm.demandSource" placeholder="请选择" style="width: 450px">
              <el-option label="市场" value="市场"></el-option>
              <el-option label="客户" value="客户"></el-option>
              <el-option label="用户" value="用户"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="来源备注">
            <label slot="label">&nbsp;&nbsp;&nbsp;来源备注</label>
            <el-input v-model="ruleForm.sourceRemark" style="width: 450px"></el-input>
          </el-form-item>

        </el-form>

        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm-3">
          <el-form-item label="优先级" prop="privilege">
            <el-select v-model="ruleForm.privilege" placeholder="请选择" style="width: 450px;">
              <el-option label="紧急重要" value="紧急重要"></el-option>
              <el-option label="重要不紧急" value="重要不紧急"></el-option>
              <el-option label="紧急不重要" value="紧急不重要"></el-option>
              <el-option label="不重要不紧急" value="不重要不紧急"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="提出人">
            <label slot="label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提出人</label>
            <el-input v-model="ruleForm.proposer" style="width: 450px"></el-input>
          </el-form-item>
        </el-form>

        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm-4">
          <el-form-item label="需求名称" prop="demandName">
            <el-input v-model="ruleForm.demandName" style="width: 450px"></el-input>
          </el-form-item>

          <el-form-item label="计划工时" prop="planTime">
            <label slot="label">&nbsp;&nbsp;&nbsp;计划工时</label>
            <el-input v-model.number="ruleForm.planTime" style="width: 450px"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true" class="upload-demo">
          <el-form-item label="附件">
            <label slot="label">&nbsp;&nbsp;&nbsp;附件</label>
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed">
              <el-button size="small">点击上传</el-button>
            </el-upload>
          </el-form-item>

          <el-form-item label="不超过50M" class=""></el-form-item>
        </el-form>

        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm-5">
          <el-form-item label="需求描述" prop="demandDescription">
            <el-input
              type="textarea"
              :rows="15"
              placeholder="请输入内容"
              v-model="ruleForm.demandDescription"
              style="width: 980px">
            </el-input>
          </el-form-item>
        </el-form>

        <el-form
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm-6">
          <el-form-item label="验收标准" prop="check_criterion">
            <label slot="label">&nbsp;&nbsp;&nbsp;验收标准</label>
            <el-input
              type="textarea"
              :rows="15"
              placeholder="请输入内容"
              v-model="ruleForm.checkCriterion"
              style="width: 980px">
            </el-input>
          </el-form-item>
        </el-form>

        <el-form class="demo-ruleForm-7">
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form>

      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
import qs from 'qs';

export default {
  name: "Need",
  data() {
    return {
      ruleForm: {
        bgContract: '',
        bgProject: '',
        stageNum: '',
        demandSource: '',
        sourceRemark: '',
        privilege: '',
        demandName: '',
        planTime: '',
        proposer: '',
        demandDescription: '',
        checkCriterion: '',
        proposeTime: null,
        isCheck: 0
      },
      rules: {
        bgContract: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        bgProject: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        demandSource: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        planTime: [
          {type: 'number'}
        ],
        privilege: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        demandName: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        demandDescription: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        proposer: [
          {required: true, message: '请选择', trigger: 'change'}
        ]
      },
    }
  },
  props: {
    contractList: Array,
    projectList: Array
  },
  methods: {
    submitForm() {
      const _this = this
      this.ruleForm.proposeTime = this.getCurrentTime()
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(_this.ruleForm)
          axios.post(this.$store.state.URL + '/AlterDemand/addDemand',
                    qs.stringify(this.ruleForm)).then(function (resp) {
            if (resp.data === 'success') {
              alert('添加成功')
            }
            _this.closeDialog()
          })
        } else {
          console.log('添加失败');
          return false;
        }
      });
    },
    closeDialog() {
      this.$emit("closeAddDialog")
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    getCurrentTime() {
      let date = new Date();//当前时间
      let month = this.zeroFill(date.getMonth() + 1);//月
      let day = this.zeroFill(date.getDate());//日
      let hour = this.zeroFill(date.getHours());//时
      let minute = this.zeroFill(date.getMinutes());//分
      let second = this.zeroFill(date.getSeconds());//秒

      //当前时间
      let curTime = date.getFullYear() + "-" + month + "-" + day
        + " " + hour + ":" + minute + ":" + second;

      return curTime;
    },
    zeroFill(i) {
      if (i >= 0 && i <= 9) {
        return "0" + i;
      } else {
        return i;
      }
    },
  }
}
</script>

<style scoped>
.demo-ruleForm-1 {
  position: absolute;
  left: 100px;
}

.demo-ruleForm-2 {
  position: absolute;
  left: 100px;
  top: 150px;
}

.demo-ruleForm-3 {
  position: absolute;
  left: 115px;
  top: 210px;
}

.demo-ruleForm-4 {
  position: absolute;
  left: 100px;
  top: 270px;
}

.upload-demo {
  position: absolute;
  left: 130px;
  top: 330px;
}

.demo-ruleForm-5 {
  position: absolute;
  left: 100px;
  top: 390px;
}

.demo-ruleForm-6 {
  position: absolute;
  left: 100px;
  top: 750px;
}

.demo-ruleForm-7 {
  position: absolute;
  left: 46%;
  top: 1100px;
}

.need {
  height: 1100px;
}
</style>
